import React, { Component } from 'react'
import './index.css'

export default class Footer extends Component {
  checkTodos=(event)=>{
    const {handleCheckedAll} = this.props
    handleCheckedAll(event.target.checked)
  }
  handleDeleteDone=()=>{
    const {deleteDone} = this.props
    deleteDone()
  }
  render() {
    const {todos} = this.props
    const total = todos.length
    const doneCount = todos.reduce((pre,todo)=>{return pre+(todo.done?1:0)},0)
    return (
      <div className="todo-footer">
          <label>
          <input type="checkbox" checked={(total === doneCount && total)?true:false} onChange={this.checkTodos}/>
          </label>
          <span>
          <span>已完成{doneCount}</span> / 全部{total}
          </span>
          <button className="btn btn-danger" onClick={this.handleDeleteDone}>清除已完成任务</button>
      </div>
    )
  }
}
